<template>
    <div>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="../assets/images/icon_5.jpg" alt="">
                    <span>直播专区</span>
                </div>
            </div>
            <div class="jx_content">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularity">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="https://www.douyu.com/">
                                <img src="../assets/images/赛博.jpg" alt="">
                                <div class="has_border">
                                    <h3>游戏地图</h3>
                                    <div class="price">一起寻找未知的奥秘</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="https://www.huya.com/">
                                <img src="../assets/images/CF.jpg" alt="">
                                <div class="has_border">
                                    <h3>游戏简介</h3>
                                    <div class="price">好的</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="../assets/images/LOL.jpg" alt="">
                                <div class="has_border">
                                    <h3>游戏攻略</h3>
                                    <div class="price">探索未知的奥秘</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="../assets/images/王者.jpg" alt="">
                                <div class="has_border">
                                    <h3>游戏论坛</h3>
                                    <div class="price">寻找一起游戏的伙伴</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="../assets/images/icon_5.jpg" alt="">
                    <span>游戏专区</span>
                </div>
            </div>


            <div class="content">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity">
                        <div class="row">
                            <div class="col-md-3" v-for="zone in gameZone">
                                <div class="has_border" >
                                    <img :src="zone.imageurl" alt="" style="display: inline-block">
                                <router-link :to="{name: 'MainPosts',params:{id:zone.id}}" style="display: inline-block">
                                    <h3>{{zone.name}}</h3>

                                </router-link>
                                    <div class="price">请大家友好的交流</div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>





            <!--<el-row >-->
                <!--<el-col :span="24"></el-col>-->
            <!--</el-row>-->
            <!--<el-row :gutter="11">-->
                <!--<el-col :span="4" v-for="zone in gameZone" >-->
                    <!--<div class="grid-content bg-purple" >-->
                        <!--<i class="paiban" >-->
                            <!--<i class="el-icon-aim"></i>-->
                            <!--<router-link :to="{name: 'Posts',params:{id:zone.id}}">-->
                                <!--{{zone.name}}-->
                            <!--</router-link>-->

                        <!--</i>-->

                    <!--</div>-->
                <!--</el-col>-->


            <!--</el-row>-->
        </section>


    </div>
</template>

<script>
    export default {
        name: "GameZone",
        data(){
            return{
                gameZone: {},
                key:0
            }

        },
        methods:{
            getZones(){
                const _this=this;
                this.$axios.get("/gamezone/list").then(res=>{
                    console.log(res);
                    _this.gameZone=res.data.data

                })
            },
            toPostsView(id){
                this.$router.push("/")
            }
        },
        mounted() {
            this.getZones()
        }
    }
</script>

<style scoped>
    @import '../assets/css/index.css';
    .col-md-3{width:22%}
    .col-md-3{position:relative;min-height:1px;padding-right:15px;padding-left:15px;padding-top:15px}
    .col-md-3{float:left}
    .content .row, .guone_r .row {
        margin-right: -8px;
    }
    .content a, .guone_r a{
        text-decoration: none;
        display: block;
    }
    .content .has_border, .guone_r .has_border{
        border: 1px solid #eee;
        padding: 0 6px;
    }
    .content h3, .guone_r h3 {
        margin: 5px 0;
        padding-right: 11px;
        font-size: 14px;
        color: #000;
        line-height: 24px;
        overflow: hidden;
        font-weight: normal;
        background-color: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .content img, .guone_r .row img {

        display: block;
        width: 10%;
    }
    .jx_tabs {
        list-style: none;
        margin-bottom: 0;
        height: 35px;
        margin-left: 120px;
    }

    .imglist-item{
        margin-right:10px;
    }
    .youxizhuanqu{
        padding-left: 0%;
        align-content: center;
        align-items: center;
    }
    .paiban {
        position: absolute;
        left: 10px;
        top: 5px;
    }
    #tag{
        color: #d10020;
    }
    #img1{
        position:absolute;
        clip:rect(0px 1900px 140px 0px);
        z-index:-1;
        -webkit-user-drag: none;
    }
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        position: relative;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    *{
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
</style>